<!--
内容：登录 组件
作者：machangle
日期： 20171110
-->
<template>
  <div class="login-component pop-ups clearfix ">
    <transition name="fade">
       <div class="col-xs-8 col-sm-6 col-md-3 pop-ups-cont" v-show="showLogin">
        <header class="state-icon">
          <span>魔汉管理平台登录</span>
        </header>

        <main class="main-wrap" style="margin:0 auto; width:80%;">
          <p class="item-form">
            <el-input placeholder="账户" v-model="account" auto-complete="off"></el-input>
          </p>
          <p class="item-form">
            <el-input type="password" v-model="password" placeholder="密码" auto-complete="off"></el-input>
          </p>
        </main>

        <footer class="footer-wrap">
          <div class="clearfix">
            <el-button type="primary" style="width: 80%;" @click="login">登录</el-button>
          </div>

          <p class="error-msg">{{ msgEror }}</p>
        </footer>
      </div>
    </transition>
   
  </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        showLogin: false,
        account: 'admin001',
        password: 'admin001',
        msgEror: ''
      }
    },
    computed: {},
    mounted () {
      this.showLogin = true
    },
    methods: {
      login () {
        let that = this
        let inputAccountValue = that.account.removeSpace()
        let inputpasswordValue = that.password.removeSpace()
        if (inputAccountValue) {
          if (inputpasswordValue) {
            that.msgEror = ''
            this.Api.getLoginData(inputAccountValue, inputpasswordValue).then((res) => {
              return this.Api.checkResponse(res)
            }).then(data => {
              that.account = ''
              that.password = ''
              let loginData = {}
              loginData.userId = data.data.userId
              loginData.token = data.data.token
              this.$store.commit(this.Constant.SET_LOGIN_DATA, loginData)
              this.$router.push({name: 'Main'})
            }).catch(error => {
              this.Api.handleError(error)
            })
          } else {
            that.msgEror = '密码不能为空'
          }
        } else {
          that.msgEror = '账户不能为空'
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="scoped" type="text/css">
  .pop-ups {
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    color: #fff;
    background-image: -webkit-linear-gradient(left bottom, #DDDECE 0%, #CFD5C7 10%, #CBD1C3 30%, #B1D1C6 50%, #CAD6CA 70%, #B1D1C6 85%, #95B6AF 100%);
  }

  .pop-ups-cont {
    position: absolute;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 260px;
    color: #000;
    // background: #fff;
    text-align: center;
    // border: 1px solid #ccc;
    // border-radius: 5px;
    .state-icon {
      font-size: 16px;
      padding: 20px 0;
    }

    .main-wrap {
      .title {
        margin: 0 0 10px;
        padding: 0;
        line-height: 30px;
        color: #333;
        font-size: 20px;
      }
      .tips {
        line-height: 20px;
        color: #999;
        font-size: 14px;
      }
    }
    .error-msg {
      line-height: 20px;
      color: #f00;
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: all .5s ease;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0
  }
</style>
